import React, { useState } from "react";
import {
  useNavigate,
  Link,
  Routes,
  Route,
  useInRouterContext,
  useNavigationType,
  useOutlet,
  useOutletContext,
} from "react-router-dom";

export default function UseOutletContext() {
  // 返回值为布尔值，判断当前组件是否存在路由上下文内，也就是是个被BrowserRouter或者HashRouter所包裹，如果被包裹则返回true
  const count = useInRouterContext();
  console.log(count, "useInRouterContext");
  //   作用： 返回当前的导航类型（用户是如何来到当前页面的）
  // 返回值：POP、PUSH、REPLACE
  // 备注：POP是指在浏览器中直接打开了这个路由组件（刷新页面）
  const iu = useNavigationType();
  console.log(iu, "useNavigationType");
  // 这个必须是Outlet标签传递才行
  const useOutletContext1 = useOutletContext();
  console.log(useOutletContext1, "useOutletContext");
  return (
    <div>UseOutletContext--useInRouterContext--useNavigationType的使用</div>
  );
}
